import React, { useState, useEffect } from 'react'
import { Table, Image, Button, Space } from 'antd'
import { getNavlist } from './../../api/nav'
function NavigatorList() {
  const [ navlist, setNavlist ] = useState([])
  const [pageSize,setPageSize]=useState(6);
  const [total]=useState(0);
  const [current,setCurrent]=useState(1)
  const [selectedRowKeys,setSelectedRowKeys]=useState([])

  useEffect(() => {
    getNavlist().then(res => {
      setNavlist(res.data.data)
    })
  }, [])
  const indexNum=(current-1)*pageSize
  const columns = [
    {
      title: '序号',
      render (text, record, index) {
        return (<span>{ indexNum+index + 1}</span>)
      }
    },
    {
      title: '分类',
      dataIndex: 'categoryname',
      key: 'categoryname'
    },
    {
      title: '标识',
      dataIndex: 'name',
      key: 'name'
    },
    { 
      title: '图标',
      dataIndex: 'icon',
      key: 'icon',
      render (text) {
        return <Image src={ text } />
      }
    },
    { 
      title: '操作',
      render (text) {
        return <Space>
          <Button>编辑</Button>
          <Button>删除</Button>
        </Space>
      }
    }
  ]
  const onSelectChange = (selectedRowKeys, selectedRow) => {

    setSelectedRowKeys( selectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  return (
    <>
      <Table
      rowSelection={rowSelection}
      dataSource = { navlist}
      columns = { columns }
      rowKey={record=>record.navid}
      pagination = { {
        position: ['topCenter'],
        current:current,
        pageSize:pageSize,
        showSizeChanger: true,
        pageSizeOptions: [5, 10, 15, 20, 50],
        showQuickJumper: true,
        
        showTotal: (total, range) => {
           
          return `共有${total} 条数据`
        },
        total: total,
        
        onChange: (page, pageSize) => {
          setCurrent(page)
        },
        onShowSizeChange: (current, size) => {
          setPageSize(size)
        }
      }}
      />
    </>
  )
}

export default NavigatorList
